.accountViewScroll
  position absolute 
  top 0
  bottom 0
  left 0
  right 0
  padding-top 30px
  padding-bottom 60px
  overflow-y scroll
  overflow-x hidden
  border-radius 26px

.inventoryWrapper
  background var(--ghostZ)
  margin 0px 6px 6px 6px
  padding 0px 3px 1px 3px
  border-radius 20px
  overflow auto

  .inventoryCollection:first-child
    border-top-left-radius 17px
    border-top-right-radius 17px

  .inventoryCollection:last-child
    border-bottom-left-radius 17px
    border-bottom-right-radius 17px

  .inventoryCollection:first-child:last-child
    border-radius 17px

.inventoryCollection:hover
  background var(--ghostB)

.inventoryCollection
  position relative
  border-radius 8px
  z-index 300
  width 100%
  
  .inventoryCollectionTop
    position relative
    display flex
    justify-content space-between
    align-items center
    padding 16px 12px 16px 16px
    font-size 14px
    cursor pointer
    font-weight 400

    *
      pointer-events none

  .inventoryCollectionLine
    position absolute
    top 0
    left 16px
    right 16px
    bottom -1px
    border-bottom 1px solid var(--ghostA)
    pointer-events none

  .inventoryCollectionName
    display flex
    justify-content center
    align-items center

  .inventoryCollectionCount
    width 48px
    height 24px
    background var(--ghostB)
    display flex
    justify-content center
    align-items center
    border-radius 12px
    font-size 16px
    margin-bottom -2px
    border 2px solid var(--ghostZ)
    font-weight 400
    font-size 14px
    
.inventoryCollection:last-child
  .inventoryCollectionLine
    border-bottom none

.inventoryNotFound
  font-size 10px
  text-transform uppercase
  font-weight 400
  letter-spacing 1px
  padding-left 1px
  display flex
  justify-content center
  align-items center
  transition var(--standard)
  color var(--outerspace04)
  font-weight 400
  margin-top 3px
  height 48px
  border-radius 17px
  box-sizing border-box

.inventoryPreviewTitle
  background var(--ghostB)
  box-shadow 0px 1px 4px var(--ghostA)
  position absolute
  top 267px
  left 3px
  right 3px
  height 30px
  z-index 4
  display flex
  justify-content center
  align-items center
  font-weight 400
  font-size 12px
  border-radius 3px
  border-radius 8px
  text-transform uppercase
  letter-spacing 1px
  padding-bottom 2px

.inventoryPreview
  position absolute
  top 33px
  left 3px
  right 3px
  height 130px
  padding 50px
  z-index 3
  display flex
  justify-content center
  align-items center
  flex-direction column
  border-radius 3px
  border-top-left-radius 8px
  border-top-right-radius 8px

  .inventoryPreviewCollection
    background-repeat no-repeat
    background-size cover
    background-position center
    position absolute
    left 50%
    height 100px 
    width 100px
    margin-left -56px
    z-index 2
    border-radius 56px
    box-shadow 0px 5px 10px var(--ghostY)
    border 6px solid var(--ghostB)

  .inventoryPreviewMedia
    position absolute
    top 12px
    left 12px
    right 12px
    bottom 12px
    z-index 1
    opacity 1
    overflow hidden
    z-index 4

    img
      width 100%
      height 100%
      object-fit contain

    img:before
      content attr(alt)
      top 0
      bottom 0
      left 0
      right 0
      width 100%
      height 100%
      overflow: hidden
      background var(--outerspace)
      color var(--ghostZ)
      display flex
      justify-content center
      align-items center
      font-size 11px
      font-weight 300
      letter-spacing -0.5px
      margin-left -0.5px

.moduleExpanded
  .inventoryCollectionItems
    position relative

.inventoryDisplay
  position absolute
  top 0
  right 0
  bottom 0
  left 0

  .inventoryCollectionImage
    height 42px
    width 42px
    border-radius 4px
    background var(--ghostA)
    overflow hidden

    img
      height 42px
      width 42px
      object-fit cover

  .inventoryCollectionItems
    position absolute
    top 290px
    bottom 0
    left 0
    right 0
    padding 14px 0px 4px 4px
    display flex
    flex-wrap wrap
    align-content flex-start
    overflow-y scroll
    border-bottom-left-radius 26px
    border-bottom-right-radius 26px

    .inventoryCollectionItem
      width 94px
      height 94px
      border-radius 12px
      padding 4px
      box-sizing border-box
      cursor pointer
      *
        pointer-events none

    .inventoryItemImage
      object-fit cover
      left 0px
      top 0px
      z-index 1
      width: 94px
      height: 94px

      img
        width 90px
        height 90px
        border-radius 16px
        box-shadow 0px 2px 0px var(--ghostZ)
        transition 0.03s linear
        overflow hidden

      img:before
        content attr(alt)
        top 0
        bottom 0
        left 0
        right 0
        border-radius 16px
        width 80px
        height 82px
        overflow: hidden
        background var(--outerspace)
        color var(--ghostZ)
        display flex
        justify-content center
        align-items center
        font-size 11px
        font-weight 300
        letter-spacing -0.5px
        padding 4px
        text-align center

    .inventoryCollectionItem:hover
      img
        transform scale(1.1)
        box-shadow 0px 3px 6px var(--ghostX)
